<template>
  <div class="about-container">
    <el-header class="about-header">
      <h1>省料侠 - 专业材料优化计算工具</h1>
    </el-header>
    
    <el-main class="about-content">
      <el-card class="intro-card">
        <h2>网站简介</h2>
        <p>省料侠是一个专注于材料优化计算的专业工具网站。它旨在帮助用户通过输入原材料和待切割零件的信息，实现材料的优化利用，从而减少浪费，提高生产效率。</p>
        <p>网站地址：<a href="https://www.shengliaoxia.top" target="_blank">www.shengliaoxia.top</a></p>
      </el-card>

      <el-card class="feature-card">
        <h2>网站功能</h2>
        <el-divider />
        <div class="feature-list">
          <div class="feature-item">
            <h3><i class="el-icon-upload"></i> 原材料输入</h3>
            <p>用户可以在网站上添加原材料的信息，包括但不限于材料的类型、尺寸、数量等。</p>
          </div>
          <div class="feature-item">
            <h3><i class="el-icon-edit"></i> 待切割零件输入</h3>
            <p>用户需要输入待切割零件的尺寸、数量等需求信息，以便网站进行后续的优化计算。</p>
          </div>
          <div class="feature-item">
            <h3><i class="el-icon-cpu"></i> 优化计算</h3>
            <p>在输入了原材料和待切割零件的信息后，用户可以点击"计算"按钮，网站将自动进行材料优化计算，给出最佳的切割方案。</p>
          </div>
          <div class="feature-item">
            <h3><i class="el-icon-download"></i> 导出优化结果</h3>
            <p>计算完成后，用户可以导出优化结果，以便在实际生产中应用。</p>
          </div>
          <div class="feature-item">
            <h3><i class="el-icon-notebook-2"></i> 历史记录</h3>
            <p>网站还提供了历史记录功能，用户可以查看之前的优化计算记录，方便进行对比和分析。</p>
          </div>
        </div>
      </el-card>

      <el-card class="characteristic-card">
        <h2>网站特点</h2>
        <el-divider />
        <div class="characteristic-list">
          <div class="characteristic-item">
            <h3><i class="el-icon-medal"></i> 专业性</h3>
            <p>省料侠专注于材料优化计算，具有高度的专业性。</p>
          </div>
          <div class="characteristic-item">
            <h3><i class="el-icon-mouse"></i> 易用性</h3>
            <p>网站界面简洁明了，操作流程简单易懂，用户无需专业知识即可轻松上手。</p>
          </div>
          <div class="characteristic-item">
            <h3><i class="el-icon-lightning"></i> 高效性</h3>
            <p>通过自动化的优化计算，省料侠能够迅速给出最佳的切割方案，提高生产效率。</p>
          </div>
          <div class="characteristic-item">
            <h3><i class="el-icon-coin"></i> 实用性</h3>
            <p>优化结果可直接应用于实际生产中，帮助用户减少材料浪费，降低成本。</p>
          </div>
        </div>
      </el-card>

      <el-card class="summary-card">
        <h2>总结</h2>
        <p>省料侠是一个功能强大、易于使用的材料优化计算工具网站。它能够帮助用户实现材料的最大化利用，减少浪费，提高生产效率。无论是制造业企业还是个人DIY爱好者，都可以通过省料侠来优化自己的材料使用，实现更加环保、高效的生产方式。</p>
      </el-card>
    </el-main>
    <!-- 添加备案信息 -->
    <el-footer style="text-align: center; padding: 20px; background-color: #f5f7fa;">
    <div>
      <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #666; text-decoration: none;">
        冀ICP备2025108558号
      </a>
    </div>
  </el-footer>
  </div>
</template>

<script setup>
import { useHead } from '#imports'

useHead({
  title: '关于省料侠 - 专业材料优化计算工具',
  meta: [
    { name: 'description', content: '了解省料侠网站的功能和特点，专业材料优化计算工具，帮助您提高材料利用率，减少浪费。' }
  ]
})
</script>

<style scoped>
.about-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.about-header {
  text-align: center;
  margin-bottom: 30px;
}

.about-header h1 {
  font-size: 2.5rem;
  color: #409EFF;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.intro-card,
.feature-card,
.characteristic-card,
.summary-card {
  padding: 20px;
}

h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 20px;
}

h3 {
  font-size: 1.2rem;
  color: #409EFF;
  margin-bottom: 10px;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
}

.feature-list,
.characteristic-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.feature-item,
.characteristic-item {
  padding: 15px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.el-icon {
  margin-right: 8px;
}

a {
  color: #409EFF;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>